<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../VueJs/vue.js"></script>
</head>

<body>
    <!-- 
     	生命周期：
     			1.又名：生命周期回调函数、生命周期函数、生命周期钩子。
     			2.是什么：Vue在关键时刻帮我们调用的一些特殊名称的函数。钩子函数是在特定的生命周期阶段被触发的函数，可以用来执行一些特定的逻辑
     			3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
     			4.生命周期函数中的this都指向是vm 或 组件实例对象。

                 为什么叫钩子，因为是vm在某个步骤上已经写了执行该名称的函数，但函数内容定义就得你来定义,在特定时机把他钩出来执行
                 生命周期钩子函数是在Vue实例运行期间自动调用的函数
            		-->
    <div id="root">
        <h2 :style="styleObj">欢迎来到，成都信息工程大学</h2>
    </div>
</body>
<script>
    Vue.config.productionTip = false;
    Vue.config.devtools = true;
    const vm = new Vue({
        el: '#root',
        data: {
            styleObj: {
                opacity: 1
            }
        },
        //vue先解析模板，然后生成新的虚拟dom，然后初始生成真实dom放到页面后(这时称为挂载完毕)调用mounted
        //所以mounted只在初始化完毕后调用，且只调一次
        //后续再解析模板生成真实dom不会再调用
        mounted: function () {
            console.log(this);//vm实例
            setInterval(() => {
                this.styleObj.opacity = this.styleObj.opacity < 0 ? 1 : this.styleObj.opacity - 0.01;
            }, 16);
        },
    });

    //通过外部定时器实现(不推荐)
    /* setInterval(() => {
        vm.styleObj.opacity = vm.styleObj.opacity < 0 ? 1 : vm.styleObj.opacity - 0.01;
    }, 16); */
</script>

</html>